﻿@{
    Layout = null;
    ViewData["Title"] = "IndexUdp";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>薪酬标准登记复核</h1>
<div id="app">
    @*Table表格*@
    <div v-if="tabhid">
        <el-table :data="salary_standards"
                  height="250"
                  border
                  style="width: 100%">
            <el-table-column prop="standard_id" label="薪酬标准编号" width="180">
            </el-table-column>
            <el-table-column prop="standard_name" label="薪酬标准名称" width="180">
            </el-table-column>
            <el-table-column prop="designer" label="制定人" width="180">
            </el-table-column>
            <el-table-column prop="regist_time" label="登记时间" width="180" :formatter="filtrTime">
            </el-table-column>
            <el-table-column prop="salary_sum" label="薪酬总额" width="180">
            </el-table-column>
            <el-table-column label="复核">
                <template slot-scope="scope">
                    <el-button icon="el-icon-refresh" size="mini" v-on:click="checkSala(scope.row)">复核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pgcurrent"
                       :page-sizes="[3, 6, 9, 11]"
                       :page-size="pgsize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="rows">
        </el-pagination>
    </div>
    @*单条薪酬标准复核*@
    <div v-if="!tabhid">
        @*操作按钮*@
        <el-row :gutter="20">
            <el-col :span="6" :offset="17">
                <el-button type="primary" v-on:click="handleCheckSubmit('salary_standard')">复核通过</el-button>
                <el-button type="warning" v-on:click="handleFanhui" style="margin-left: 20px;">返回</el-button>
            </el-col>
        </el-row>
        @*美观，上下隔断一点间距*@
        <div style="margin: 25px 0;"></div>
        <el-form ref="salary_standard" :rules="rules" :model="salary_standard" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-form-item label="薪酬标准编号">
                        <el-input v-model="salary_standard.standard_id" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="薪酬标准名称">
                        <el-input v-model="salary_standard.standard_name" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="薪酬总额">
                        <el-input v-model="salary_standard.salary_sum" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-form-item label="制定人">
                        @*<el-input v-model="salary_standard.designer" :disabled="true"></el-input>*@
                        <el-select v-model="salary_standard.designer" placeholder="请选择制定人">
                            <el-option v-for="item in optUsers"
                                       :key="item.u_id"
                                       :label="item.u_name"
                                       :value="item.u_name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="复核人">
                        <el-select v-model="salary_standard.checker" placeholder="请选择复核人">
                            <el-option v-for="item in optUsers"
                                       :key="item.u_id"
                                       :label="item.u_name"
                                       :value="item.u_name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="复核时间">
                        <el-date-picker v-model="salary_standard.check_time"
                                        type="datetime"
                                        placeholder="选择日期时间" :disabled="true">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-form-item label="复核意见" prop="check_comment">
                        <el-input type="textarea"
                                  :autosize="{ minRows: 4, maxRows: 6}"
                                  placeholder="请输入复核意见"
                                  v-model="salary_standard.check_comment">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        @*详细薪酬信息表格*@
        <el-table :data="salary_standard_details"
                  height="250"
                  border
                  style="width: 100%">
            <el-table-column prop="sdt_id"
                             label="序号"
                             width="300">
            </el-table-column>
            <el-table-column prop="item_name"
                             label="薪酬项目名称"
                             width="360">
            </el-table-column>
            <el-table-column prop="salary"
                             label="金额"
                             width="360">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.salary" :disabled="true" :controls="false" :precision="2" :min="0" :max="10000"></el-input-number>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            //薪酬表单数据源
            salary_standards: [],
            //页容量
            pgsize: 3,
            //页下标：第几页
            pgcurrent: 1,
            //总数据行数
            rows: 0,
            //表单隐藏显示按钮
            tabhid: true,
            //下拉列表框用户集合的数据源
            optUsers:[],
            //薪酬标准基本信息表
            salary_standard: {
                ssd_id: '',//主键，自动增长列
                standard_id: '',//薪酬标准单编号
                standard_name: '',//薪酬标准单名称
                designer: '',// 制定人
                register: '',//登记人
                checker: '',//复核人
                changer: '',//变更人
                regist_time: '',//登记时间
                check_time: '',//复核时间
                change_time: '',//变更时间
                salary_sum: 0,//薪酬总额
                check_status: '',//是否经过复核
                change_status: '',//更改状态
                check_comment: '',//复核意见
                remark: '',//备注
            },
            //薪酬详细信息数据源
            salary_standard_details: [],
            //表单验证规则
            rules: {
                check_comment: [
                    { required: true, message: "请填写复核意见！", trigger: 'blur' }
                ],
            },
        },
        methods: {
            //查询所有未复核过的薪酬标准
            salaryFill() {
                axios.get('/SalaryStandard/SalaryFillIsNoCheck?pgsize=' + this.pgsize + '&pgcurrent=' + this.pgcurrent).then((res) => {
                    this.salary_standards = res.data.tabs;
                    this.rows = res.data.rows;
                })
                //查询下拉列表框中的所有用户信息
                axios.get("/SalaryStandard/FindUsers").then((res) => {
                    console.info("optUsers:", res.data);
                    //公共字段里所有薪资组成集合
                    this.optUsers = res.data;
                })
            },
            //获取当前时间
            getNowTime() {
                var now = new Date();
                var year = now.getFullYear(); //获取年
                var month = now.getMonth();//获取月
                var date = now.getDate();//获取日
                var hours = now.getHours();//获取小时
                var minutes = now.getMinutes();//获取分钟
                var seconds = now.getSeconds();//获取秒
                month = month + 1;
                month = month.toString().padStart(2, "0");
                date = date.toString().padStart(2, "0");
                var defaultDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
                this.salary_standard.check_time = new Date();
            },
            //定义时间戳
            created() {
                setInterval(() => {
                    this.getNowTime();
                }, 500);
            },
            //时间过滤器
            filtrTime(row, column) {
                let data = row[column.property]
                let dt = new Date(data)
                return dt.getFullYear() + '年' + (dt.getMonth() + 1) + '月' + dt.getDate() + "日"
            },
            //复核按钮点击
            checkSala(row) {
                //隐藏表格，显示表单
                this.tabhid = false;
                //给表格赋值
                this.salary_standard = row;
                //获取到当前登录用户，赋值为复核人
                this.salary_standard.checker = sessionStorage.getItem("userName");
                //请求查询该条薪酬下的详细薪酬信息
                axios.get("/SalaryStandard/SalaryStandardDetailBySid?standard_id=" + row.standard_id).then((res) => {
                    this.salary_standard_details = res.data;
                })
            },
            //提交复核通过按钮
            handleCheckSubmit(ruleForm) {
                console.info(ruleForm);
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        axios.post("/SalaryStandard/SalaryStandardCheck", {
                            ssd_id: this.salary_standard.ssd_id,
                            changer: this.salary_standard.changer,
                            check_time: this.salary_standard.check_time,
                            //是否经过复核修改为1
                            check_status: 1,
                            check_comment: this.salary_standard.check_comment,
                        }).then((res) => {
                            if (res.data > 0) {
                                this.successOpen();
                                //重置表单验证的所有数据
                                this.$refs[ruleForm].resetFields();
                                //返回显示到表单页并刷新
                                this.tabhid = true;
                                this.salaryFill();
                            }
                        })
                    } else {
                        this.warningOpen();
                    }
                })
            },
            //返回按钮
            handleFanhui() {
                this.tabhid = true;
            },
            //成功方法弹窗
            successOpen() {
                this.$notify({
                    title: '成功',
                    message: '复核通过已提交！',
                    type: 'success'
                });
            },
            //警告方法弹窗
            warningOpen() {
                this.$notify({
                    title: '提示',
                    message: '请完善复核意见后再确认通过！',
                    type: 'warning'
                });
            },
            //页面容量改变事件
            handleSizeChange(val) {
                this.pgsize = val;
                this.salaryFill();
            },
            //页面下标改变事件
            handleCurrentChange(val) {
                this.pgcurrent = val;
                this.salaryFill();
            },
        },
        mounted: function() {
            this.salaryFill();
            this.created();
        }
    })


</script>
